<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>

	<body>
		<div id="app">
		<title>{{title}}</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"  v-if="curPage=='index1'"/>
		<link rel="stylesheet" type="text/css" href="css/classify.css"   v-if="curPage=='classify'"/>
		<link rel="stylesheet" type="text/css" href="css/discover.css"  v-if="curPage=='discover'" />
		<link rel="stylesheet" type="text/css" href="css/particular.css"  v-if="curPage=='particular'" />
		<link rel="stylesheet" type="text/css" href="css/personal.css"  v-if="curPage=='personal'" />
			<keep-alive>
				<component v-on:srll="pagew($event)" :is="curPage">
				</component>
			</keep-alive>
		</div>
		<!--首页-->
		<template id="index1">
			<div>
				<div class="web">
					<!--头部S-->
					<header class="clear_fix">
						<div class="logo fl">
							<a href="index.html">
								<img src="img/first/shopping-logo.png" />
							</a>
						</div>
						<div class="search fl">
							<form action="" method="post">
								<input type="" name="" placeholder="请输入商品名称" id="" value="" />
								<button><a href="particular.html"></a></button>
							</form>
						</div>
						<div class="section fl">
							<select name="">
								<option value="">广州市</option>
							</select>
						</div>
					</header>
					<!--头部E-->
					<!--内容S-->
					<section>
						<div class="kv">
							<a href="">
								<img src="img/first/images/SHOPPING-KV_02.png" />
							</a>
						</div>
						<div class="discounts">
							<div class="groupon clear_fix">
								<div class="pentagram fl">
									<i class="iconfont">&#xe7ec;</i>
									<span>优惠团劵</span>
								</div>
								<div class="more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i>
									</a>
								</div>
							</div>
							<div class="list clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/images/nineyuan.png" /></a>
									</li>
									<li class="fr">
										<a href=""><img src="img/first/images/images/2.2yi.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/images/zuigaochou.png" /></a>
									</li>
									<li class="fr">
										<a href=""><img src="img/first/images/images/zuigaojian.png" /></a>
									</li>
								</ul>
							</div>
						</div>
						<div class="like">
							<div class="guess clear_fix">
								<div class="fl">
									<i class="iconfont">&#xe603;</i>
									<span>猜你喜欢</span>
								</div>
								<div class="more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i>
									</a>
								</div>
							</div>
							<div class="particulars ">
								<index2 v-on:calcu="calcula($event)"></index2>
								<div class="sushi duck clear_fix">
									<a href="">
										<div class="fl">
											<img src="img/first/images/images/zhouheiya.png" />
										</div>
										<div class="fr">
											<ul>
												<li>
													<100m</li>
														<li>已售1000</li>
											</ul>
										</div>
										<div>
											<ul>
												<li>周黑鸭（正佳店）</li>
												<li>[100店通用]双人套餐</li>
												<li><i class="iconfont">&#xe642;</i><span>88.00</span></li>
											</ul>
										</div>
									</a>
								</div>
							</div>
						</div>
					</section>
					<!--内容E-->

					<footerq v-on:calcu="calcula($event)"></footerq>
				</div>
			</div>
		</template>
		<!--详细页-->
		<template id="classify">
			<div>
				<div class="web">
					<!--头部S-->
					<header class="clear_fix">
						<div class="particular_back fl">
							<a href="index.html">
								<p>back</p>
							</a>
						</div>
						<div class="section fl">
							<select name="">
								<option value="">广州市</option>
							</select>
						</div>
						<div>分类</div>
					</header>
					<!--头部E-->
					<!--内容S-->
					<section>
						<div class="initial clear_fix">
							<div class="initial_detail clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-first-one.png" />
											<p>美食</p>
										</a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-first-two.png" />
											<p>电影</p>
										</a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-first-three.png" />
											<p>运动</p>
										</a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-first-four.png" />
											<p>唱歌</p>
										</a>
									</li>
								</ul>
							</div>

							<div class="initial_circle clear_fix">
								<div class="fl"></div>
								<div class="fl"></div>
								<div class="fl"></div>
								<div class="fl"></div>
							</div>
						</div>

						<div class="initial_section">
							<div class="initial_section_first clear_fix">
								<div class="initial_section_cate fl">
									<i class="iconfont">&#xe60d;</i>
									<span>美食类</span>
								</div>
								<div class="more fr">
									<span>更多</span>
									<i class="iconfont">&#xe605;</i>
								</div>
							</div>
							<div class="initial_section_firstdetail clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-second-one.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-second-two.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-second-three.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-second-four.png" /></a>
									</li>
								</ul>
							</div>
						</div>

						<div class="initial_section">
							<div class="initial_section_first clear_fix">
								<div class="initial_section_cate fl">
									<i class="iconfont">&#xe60a;</i>
									<span>运动类</span>
								</div>
								<div class="more fr">
									<span>更多</span>
									<i class="iconfont">&#xe605;</i>
								</div>
							</div>
							<div class="initial_section_firstdetail clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-third-one.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-third-two.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-third-three.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-third-four.png" /></a>
									</li>
								</ul>
							</div>
						</div>

						<div class="initial_section">
							<div class="initial_section_first clear_fix">
								<div class="initial_section_cate fl">
									<i class="iconfont">&#xe60b;</i>
									<span>电影类</span>
								</div>
								<div class="more fr">
									<span>更多</span>
									<i class="iconfont">&#xe605;</i>
								</div>
							</div>
							<div class="initial_section_firstdetail clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-fourth-one.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-fourth-two.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-fourth-three.png" /></a>
									</li>
									<li class="fl">
										<a href=""><img src="img/first/images/classify-fourth-three.png" /></a>
									</li>
								</ul>
							</div>
						</div>

					</section>
					<!--内容E-->

					<footerq v-on:calcu="calcula($event)"></footerq>
				</div>
			</div>
		</template>
		<!--发现页-->
		<template id="discover">
			<div>
				<div class="web">
					<!--头部S-->
					<header class="clear_fix">
						<div class="particular_back fl">
							<a href="index.html">
								<p>back</p>
							</a>
						</div>
						<div class="section fl">
							<select name="">
								<option value="">广州市</option>
							</select>
						</div>
						<div>发现</div>
					</header>
					<!--头部E-->
					<!--内容S-->
					<section>
						<div class="search">
							<form action="" method="post">
								<input type="" name="" placeholder="请输入商品名称" id="" value="" />
								<button></button>
							</form>
						</div>
						<div class="everyone clear_fix">
							<dl>
								<dt>大家都在搜</dt>
								<dd class="fl">
									<a href="">寿司</a>
								</dd>
								<dd class="fl">
									<a href="">羽毛球</a>
								</dd>
								<dd class="fl">
									<a href="">火锅</a>
								</dd>
								<dd class="fl">
									<a href="">`游泳馆</a>
								</dd>
								<dd class="fl">
									<a href="">电影</a>
								</dd>
								<dd class="fl">
									<a href="">周黑鸭</a>
								</dd>
								<dd class="fl">
									<a href="">ktv</a>
								</dd>
								<dd class="fl">
									<a href="">肯德基</a>
								</dd>
							</dl>
						</div>
						<div class="hot">
							<div class="hot_nav clear_fix">
								<div class="hot_nav_left fl">
									<i class="iconfont">&#xe6b7;</i>
									<span>热门搜索</span>
								</div>
								<div class="hot_nav_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i>
									</a>
								</div>
							</div>
							<div class="hot_particular clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/images/hot-one.png" /></li>
									</a>
									<li class="fl">
										<a href=""><img src="img/first/images/images/hot-two.png" /></li>
									</a>
									<li class="fl">
										<a href=""><img src="img/first/images/images/hot-three.png" /></li>
									</a>
									<li class="fl">
										<a href=""><img src="img/first/images/images/hot-four.png" /></li>
									</a>
								</ul>
							</div>
						</div>
						<div class="hot hot_second">
							<div class="hot_nav hot_nav_second clear_fix">
								<div class="hot_nav_left fl">
									<i class="iconfont">&#xe681;</i>
									<span>热门搜索</span>
								</div>
								<div class="hot_nav_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i>
									</a>
								</div>
							</div>
							<div class="hot_particular_second clear_fix">
								<ul>
									<li class="fl">
										<a href=""><img src="img/first/images/images/particular-one.png" /></li>
									</a>
									<li class="fl">
										<a href=""><img src="img/first/images/images/particular-two.png" /></li>
									</a>
									<li class="fl">
										<a href=""><img src="img/first/images/images/particular-three.png" /></li>
									</a>
								</ul>
							</div>
						</div>
					</section>
					<!--内容E-->

					<footerq v-on:calcu="calcula($event)"></footerq>
				</div>
			</div>
		</template>
		<!--产品详细页-->
		<template id="particular">
			<div>
				<div class="web">
					<!--头部S-->
					<header class="clear_fix">
						<div class="particular_back fl">
							<a href="index.html">
								<p>back</p>
							</a>
						</div>
						<div class="particular_star fr">
							<a href="">
								<i class="iconfont">&#xe681;</i>
							</a>
						</div>
						<div>产品详细</div>
					</header>
					<!--头部E-->
					<!--内容S-->
					<section>
						<div class="particular_KV">
							<div class="particular_kvphoto"><img src="img/first/images/images/shopping-kv2.png" /></div>
							<div class="particular_price clear_fix">
								<div class="kv_price_left fl">
									<i class="iconfont">&#xe642;</i>
									<span>32</span>
								</div>
								<div class="kv_price_right fr">
									<a href="">
										<p>购买</p>
									</a>
								</div>
							</div>
							<div class="particular_appraise clear_fix">
								<div class="particular_appraise_left fl">
									<i class="iconfont">&#xe681;</i>
									<span>好评度</span>
									<span>99%</span>
								</div>
								<div class="particular_appraise_right fr">
									<a href="">
										<span>共605个评价</span>
										<i class="iconfont">&#xe609;</i>
									</a>
								</div>
							</div>
						</div>
						<div class="particular_footer">
							<div class="particular_footer_nav clear_fix">
								<div class="footer_nav_left fl">
									适用商户
								</div>
								<div class="footer_nav_right fr">
									<a href="">
										<i class="iconfont">&#xe609;</i>
									</a>
								</div>
							</div>
							<div class="particular_footer_details">
								<div class="particular_footer_sushi clear_fix">
									<div class="footer_sushi_left fl">
										<img src="img/first/images/images/wansuishousi.png" />
									</div>
									<div class="footer_sushi_right fr">
										<a href="">
											<p>进入</p>
										</a>
									</div>
									<div>
										<ul>
											<li>万岁寿司（正佳店）</li>
											<li><i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<span>十分</span>
											</li>
											<li>离你100m</li>
											<li>
												<a href=""><span>查看详情</span><i class="iconfont">&#xe609;</i><i class="iconfont">&#xe609;</i></a>
											</li>
										</ul>
									</div>
								</div>
								<div class="particular_footer_sushi tiyuxi clear_fix">
									<div class="footer_sushi_left fl">
										<img src="img/first/images/images/tiyuxishousi.png" />
									</div>
									<div class="footer_sushi_right fr">
										<a href="">
											<p>进入</p>
										</a>
									</div>
									<div>
										<ul>
											<li>万岁寿司（体育西店）</li>
											<li><i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<span>十分</span>
											</li>
											<li>离你100m</li>
											<li>
												<a href=""><span>查看详情</span><i class="iconfont">&#xe609;</i><i class="iconfont">&#xe609;</i></a>
											</li>
										</ul>
									</div>
								</div>
								<div class="particular_footer_sushi changgang clear_fix">
									<div class="footer_sushi_left fl">
										<img src="img/first/images/images/changgansushi.png" />
									</div>
									<div class="footer_sushi_right fr">
										<a href="">
											<p>进入</p>
										</a>
									</div>
									<div>
										<ul>
											<li>万岁寿司（昌岗店）</li>
											<li><i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<i class="iconfont">&#xe681;</i>
												<span>十分</span>
											</li>
											<li>离你100m</li>
											<li>
												<a href=""><span>查看详情</span><i class="iconfont">&#xe609;</i><i class="iconfont">&#xe609;</i></a>
											</li>
										</ul>
									</div>
								</div>

							</div>
						</div>
					</section>
					<!--内容E-->

					<footerq v-on:calcu="calcula($event)"></footerq>
				</div>
			</div>
		</template>
		<!--个人中心页-->
		<template id="personal">
			<div>

				<div class="web">
					<!--头部S-->
					<header class="clear_fix">
						<div class="particular_back fl">
							<a href="index.html">
								<p>back</p>
							</a>
						</div>
						<div class="section_one fr">
							<a href="">
								<i class="iconfont">&#xe6e6;</i></a>
						</div>
						<div>我的</div>
					</header>
					<!--头部E-->
					<!--内容S-->
					<section>
						<div class="personal_set clear_fix">
							<a href="">
								<div class="personal_set_left fl">
									<img src="img/first/images/head.png" />
								</div>
								<div class="personal_set_right fr">
									<i class="iconfont">&#xe609;</i>
								</div>
								<div class="personal_set_center">
									<dl>
										<dt>点击登陆</dt>
										<dd>常居地设置</dd>
									</dl>
								</div>
							</a>
						</div>
						<div class="personal_comment clear_fix">
							<ul>
								<li class="fl">
									<a href="">
										<i class="iconfont">&#xe78e;</i>
										<p>我的点评</p>
									</a>
								</li>
								<li class="fr">
									<a href="">
										<i class="iconfont">&#xe643;</i>
										<p>我的优惠券</p>
									</a>
								</li>
								<li class="">
									<a href="">
										<i class="iconfont">&#xe681;</i>
										<p>我的收藏</p>
									</a>
								</li>
							</ul>
						</div>
						<div class="personal_setall">
							<div class="personal_setall_money clear_fix">
								<div class="setall_money_left fl">
									<a href="">
										<i class="iconfont">&#xe60e;</i>
										<span>我的钱包</span></a>
								</div>
								<div class="setall_money_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i></a>
								</div>
							</div>
							<div class="personal_setall_money clear_fix">
								<div class="setall_money_left fl">
									<a href="">
										<i class="iconfont">&#xe78e;</i>
										<span>待点评</span></a>
								</div>
								<div class="setall_money_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i></a>
								</div>
							</div>
							<div class="personal_setall_money setall_find clear_fix">
								<div class="setall_money_left fl">
									<a href="">
										<i class="iconfont">&#xe617;</i>
										<span>找好友</span></a>
								</div>
								<div class="setall_money_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i></a>
								</div>
							</div>
							<div class="personal_setall_money setall_myfoot clear_fix">
								<div class="setall_money_left fl">
									<a href="">
										<i class="iconfont">&#xe810;</i>
										<span>我的足迹</span></a>
								</div>
								<div class="setall_money_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i></a>
								</div>
							</div>
							<div class="personal_setall_money setall_set clear_fix">
								<div class="setall_money_left fl">
									<a href="">
										<i class="iconfont">&#xe7ce;</i>
										<span>设置</span></a>
								</div>
								<div class="setall_money_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i></a>
								</div>
							</div>
							<div class="personal_setall_money clear_fix">
								<div class="setall_money_left fl">
									<a href="">
										<i class="iconfont">&#xe612;</i>
										<span>联系</span></a>
								</div>
								<div class="setall_money_right more fr">
									<a href="">
										<span>更多</span>
										<i class="iconfont">&#xe605;</i></a>
								</div>
							</div>
						</div>
						<div class="personal_button">
							<button class="button_left fl">退出</button>
							<button class="button_right fr">注销</button>

						</div>
					</section>
					<!--内容E-->
					<footerq v-on:calcu="calcula($event)"></footerq>
				</div>

			</div>
		</template>
		<!--尾部公用插件-->
		<template id="footerq">
			<div>
				<!--尾部S-->
				<footer class="clear_fix">
					<ul>
						<li class="home fl" @click="pageq('index1')">
							<a>
								<i class="iconfont">&#xe629;</i>
								<p>首页</p>
							</a>
						</li>
						<li class="classify fl" @click="pageq('classify')">
							<a>
								<i class="iconfont">&#xe615;</i>
								<p>分类</p>
							</a>
						</li>
						<li class="fond fl" @click="pageq('discover')">
							<a>
								<i class="iconfont">&#xe608;</i>
								<p>发现</p>
							</a>
						</li>
						<li class="sns fl" @click="pageq('personal')">
							<a>
								<i class="iconfont">&#xe60c;</i>
								<p>我的</p>
							</a>
						</li>
					</ul>
				</footer>
				<!--尾部E-->
			</div>
		</template>
		<!--万岁寿司跳转-->
		<template id="index2">
			<div class="sushi clear_fix" @click="pageq('particular')">
				<a>
					<div class="fl">
						<img src="img/first/images/images/shousi.png" />
					</div>
					<div class="fr">
						<ul>
							<li>
								<100m</li>
									<li>已售1000</li>
						</ul>
					</div>
					<div>
						<ul>
							<li>万岁寿司（正佳店）</li>
							<li>[100店通用]双人套餐</li>
							<li><i class="iconfont">&#xe642;</i><span>88.00</span></li>
						</ul>
					</div>
				</a>
			</div>
		</template>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			var footerq_com = {
				template: "#footerq",
				methods: {
					pageq: function(item) {
						this.$emit('calcu', item)
					}
				}
			};
			new Vue({
				el: "#app",
				data: {
					curPage: "index1",
					title:"团购首页",
				},
				methods: {
					pagew: function(item) {
						this.curPage = item;
						if(item=="index1"){
							this.title="团购首页";
						}else if(item=="classify"){
							this.title="团购分类";
						}else if(item=="discover"){
							this.title="团购发现";
						}else if(item=="particular"){
							this.title="产品详细页";
						}else{
							this.title="个人中心";
						}
					}
				},
				components: {
					index1: {
						template: "#index1",
						components: {
							footerq: footerq_com,
							index2: {
								template: "#index2",
								methods: {
									pageq: function(item) {
										this.$emit('calcu', item)
									}
								}
							}
						},
						methods: {
							calcula: function(item) {
								this.$emit('srll', item)
							}
						}
					},
					classify: {
						template: "#classify",
						components: {
							footerq: footerq_com,
						},
						methods: {
							calcula: function(item) {
								this.$emit('srll', item)
							}
						}
					},
					discover: {
						template: "#discover",
						components: {
							footerq: footerq_com,
						},
						methods: {
							calcula: function(item) {
								this.$emit('srll', item)
							}
						}
					},
					particular: {
						template: "#particular",
						components: {
							footerq: footerq_com,
						},
						methods: {
							calcula: function(item) {
								this.$emit('srll', item)
							}
						}
					},
					personal: {
						template: "#personal",
						components: {
							footerq: footerq_com,
						},
						methods: {
							calcula: function(item) {
								this.$emit('srll', item)
							}
						}
					},
				}
			})
		</script>
	</body>

</html>